import { StyleSheet, Text, ToastAndroid, TouchableOpacity, View, TextInput, ImageBackground, Modal, Image } from 'react-native';
import React, { useState } from "react";

export default function Register({ navigation }) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [modelVisible, setModalVisible] = useState(false);
  const [modelVisible1, setModalVisible1] = useState(false);
  const toLogin = () => {
    navigation.navigate('Login')
  }
  const onBtn = () => {
    fetch('http://10.7.89.174:3000/selectUser', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        userName: username,
        password: password,
      })
    })
      .then(res => res.json())
      .then(async (res) => {
        if (res.code == 200) {
          ToastAndroid.show("该用户名已存在", ToastAndroid.SHORT);
        } else if (res.code == 300) {
          setModalVisible(true)
        }
      })
  };
  const agree = () => {
    fetch('http://10.7.89.174:3000/forwordregister', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        userName: username,
        password: password,
      })
    })
      .then(res => res.json())
      .then(async (res) => {
        if (res.code == 200) {
          setModalVisible(false)
          setModalVisible1(false)
          ToastAndroid.show("注册成功", ToastAndroid.SHORT);
        }
      })
  }
  return (
    <View style={styles.container}>
      <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
        <Image source={require('../img/logo.jpg')} style={styles.logo}></Image>
        <TextInput
          placeholder="请输入手机号/用户名"
          onChangeText={text => setUsername(text)} //读取用户的输入,从TextInput里取值的唯一做法！）
          value={username}
          style={[styles.inputStyle]}
        />
        <TextInput
          secureTextEntry={true}  //文本框会遮住之前输入的文字
          placeholder="请输入密码"
          onChangeText={text => setPassword(text)}
          value={password}
          style={[styles.inputStyle]}
        />
        <TouchableOpacity style={styles.resigterBtn}>
          <Text style={styles.resigterText} onPress={toLogin}>去登录</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.loginBtn}>
          <Text style={styles.loginText} onPress={() => onBtn()}>注册</Text>
        </TouchableOpacity>
        {/* 协议内容框 */}
        <Modal
          animationType="slide"
          transparent={true}
          visible={modelVisible}
          onRequestClose={() => {
            setModalVisible(!modelVisible);
          }}
        >
          <View style={styles.modalLayer}>
            <View style={styles.modalContainer}>
              <Text style={styles.text1}>
                温馨提示
              </Text>
              <Text style={styles.text2}>
                感谢您对校园借物一直以来的信任！
                我们依据最新的监管要求更新了校园借物 《隐私政策》 ，特向您说明如下：
              </Text>
              <Text style={styles.text2}>
                1、为向您提供交易相关基本功能，我们会收集、使用必要的信息；
              </Text>
              <Text style={styles.text2}>
                2、基于您的明示授权，我们可能会获取您的位置（为您提供附近的商品、优惠等）、设备ID（以保障您账号与交易安全）等信息，您有权拒绝或取消授权；
              </Text>
              <Text style={styles.text2}>
                3、我们会采取业界先进的安全措施保护您的信息安全；
              </Text>
              <Text style={styles.text2}>
                4、未经您同意，我们不会从第三方处获取、共享或向其提供您的信息；
              </Text>
              <Text style={styles.text2}>
                5、您可以查询、更正、删除您的个人信息，我们也提供账户注销的渠道。
              </Text>
              <TouchableOpacity style={[styles.btnStyle]} >
                <Text style={styles.loginText} onPress={() => agree()}>同  意</Text>
              </TouchableOpacity>
              <TouchableOpacity style={[styles.btnStyle]} >
                <Text style={styles.loginText} onPress={() => { setModalVisible1(true), setModalVisible(false) }}>不同意</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
          {/* 不同意协议后的弹框 */}
        <Modal
          animationType="slide"
          transparent={true}
          visible={modelVisible1}
          onRequestClose={() => {
            setModalVisible1(!modelVisible1);
          }}
        >
          <View style={styles.modalLayer}>
            <View style={{ height: '35%', backgroundColor: 'white', justifyContent: 'center', borderRadius: 8, }}>
              <Text style={styles.text2}>
                您需要同意本协议才能继续使用校园借物应用程序
              </Text>
              <Text style={styles.text4}>
                若您不同意此协议，很遗憾我们将无法为您提供服务
              </Text>
              <TouchableOpacity style={[styles.btnStyle]} >
                <Text style={styles.loginText} onPress={() => { setModalVisible(true) }}>查看协议</Text>
              </TouchableOpacity>
              <Text style={styles.text3} onPress={() => { setModalVisible(false), setModalVisible1(false) }}>仍不同意</Text>
            </View>
          </View>
        </Modal>
      </ImageBackground>
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  bgimg: {
    flex: 1,
    resizeMode: "cover",
  },
  logo: {
    width: 200,
    height: 200,
    marginTop: "25%",
    marginBottom: "6%",
    marginLeft: "25%"
  },
  inputStyle: {
    width: '80%',
    height: 35,
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 10,
    borderRadius: 8,
    borderColor: '#cacaca',
    borderWidth: 1,
    borderRadius: 8,
    paddingLeft: 15,
  },
  resigterBtn: {
    height: "4%",
    width: '13%',
    borderRadius: 5,
    marginTop: '2%',
    marginLeft: "10%",
    backgroundColor: 'white',
    justifyContent: 'center',
  },
  resigterText: {
    textAlign: 'center',
    color: 'orange',
    textAlignVertical: 'center',
    fontSize: 13
  },
  loginBtn: {
    marginLeft: 'auto',
    marginRight: 'auto',
    height: 40,
    width: '80%',
    borderRadius: 5,
    marginTop: 20,
    backgroundColor: 'orange',
    justifyContent: 'center',
  },
  loginText: {
    textAlign: 'center',
    color: 'white',
    textAlignVertical: 'center',
    fontSize: 17
  },
  modalLayer: {
    backgroundColor: 'rgba(0, 0, 0, 0.45)',
    flex: 1,
    justifyContent: 'center',
    padding: 30,
  },
  modalContainer: {
    height: '83%',
    backgroundColor: 'white',
    justifyContent: 'center',
    borderRadius: 8,
  },
  inputStyle: {
    width: '80%',
    height: 35,
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 15,
    borderColor: '#cacaca',
    borderWidth: 1,
    paddingLeft: 15,
  },
  text1: {
    width: '80%',
    borderColor: '#cacaca',
    paddingLeft: '37%',
    fontSize: 22,
  },
  text2: {
    width: '90%',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 5,
    paddingLeft: 15,
    fontSize: 18,
  },
  text3: {
    width: '25%',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 15,
    paddingLeft: 15,
    fontSize: 17,
    color: "grey",
  },
  text4: {
    width: '88%',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 5,
    paddingLeft: "3%",
    fontSize: 16,
    color: "grey",
  },

})
